<script setup>

    import {ref,reactive} from 'vue'
    import {useStore} from 'vuex'
    import {useRoute,useRouter} from 'vue-router'
    import loginApi from "@/api/login"
    import { showDialog } from 'vant'

    const store = useStore()
    const route = useRoute()
    const router = useRouter()

    const registerForm = reactive({
        username: '',
        password: '',
        uuid: '',
        code: ''
    })

    const handleRegister = () => {
        loginApi.register(registerForm).then(response => {
            //弹窗让跳转到登录
            showDialog({
                message: '注册成功，请去登录',
            }).then(() => {
                router.replace('/login')
            })
        })
    }

    const base64Img = ref('')

    const changeImg = () => {
        loginApi.getCaptcha().then(response => {
            base64Img.value = response.data.base64Img
            registerForm.uuid = response.data.uuid
        })
    }
    changeImg()
</script>

<template>
    <van-nav-bar
            title="注册"
            left-text="返回"
            left-arrow
            @click-left="$router.go(-1)"
    />

    <h3 id="title">VueShop</h3>

    <van-form @submit="handleRegister">
        <van-cell-group inset>
            <van-field
                    v-model="registerForm.username"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                    v-model="registerForm.password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
                    v-model="registerForm.code"
                    name="验证码"
                    label="验证码"
                    placeholder="验证码"
                    :rules="[{ required: true, message: '请填写验证码' }]"
            >
                <template #button>
                    <van-image width="100px" height="25px" :src="base64Img" @click="changeImg"></van-image>
                </template>
            </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button block type="primary" native-type="submit">
                注册
            </van-button>
        </div>
    </van-form>
</template>

<style scoped>
    #title{
        padding: 100px 0 50px 0;
        text-align: center;
        color: #666666;
    }
</style>
